﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="cHead" ContentPlaceHolderID="head" runat="server">

    <title><%= Html.Encode(ViewData["Title"])%></title>
    <%= Html.Script("~/Scripts/Account/UserProfile.js")%>
    <%= Html.Script("~/Scripts/jQuery/ajaxupload.js")%>
    <%= Html.Link("~/Content/Membership.css")%>

    <script type="text/javascript">
        // <![CDATA[
        $(document).ready(function () {
            documentLoad();
        })
        // ]]>
    </script>

</asp:Content>
<asp:Content ID="cMain" ContentPlaceHolderID="MainContent" runat="server">
    <div id="divErrorMessages">
        <div class="accordion_item">
                <h3><a href="#">Please fix these errors</a></h3>
            <div id="divErrors">
            </div>
        </div>
    </div>
    <div id="userProfile">
        <ul>
            <li><a href="#Details-1"><span>Secure Details</span></a></li>
            <li><a href="#Details-2"><span>Personal Details</span></a></li>
            <li><a href="#Details-3"><span>Contact Details</span></a></li>
            <li><a href="#Details-4"><span>Notification Preferences</span></a></li>
            <li><a href="#Details-5"><span>Other Details</span></a></li>
        </ul>
        <div id="Details-1">
            <table class="TableStyle">
                <tr>
                    <td>
                        Username:
                    </td>
                    <td>
                        <input id="txtUsername" type="text" disabled="disabled" />
                    </td>
                    </tr>
                <tr>
                    <td style="vertical-align:top">
                    Avatar:
                    </td>
                    <td style="vertical-align: top">
                        <div>
                            <img id="picAvatar" src="" alt="" />
                            <input id="btnChangeAvatar" type="button" value="Change Avatar ..." />
                        </div>
                        
                        <div style="display:none" id="divAvatar">
                            <table>
                                <tr>
                                    <td colspan="3">
                                    Either choose an existing avatar ...
                                    </td>
                                </tr>
                                <tr>
                                    <td><img id="imgPerson1" class="avatarImages" src="" alt="Person1" style="width:100px;height:100px"/></td>
                                    <td><img id="imgPerson2" class="avatarImages" src="" alt="Person2" style="width:100px;height:100px"/></td>
                                    <td><img id="imgPerson3" class="avatarImages" src="" alt="Person3" style="width:100px;height:100px"/></td>
                                    <td><img id="imgPerson4" class="avatarImages" src="" alt="Person4" style="width:100px;height:100px"/></td>
                                </tr>
                                <tr>
                                    <td colspan="3">
                                         Or upload your own: 
                                        <div id="txtAvatarBrowse" class="button">
                                            Upload
                                        </div>                                       
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    <input id="btnAvatarCancel" type="button" value="Close"/></td>
                                    <td colspan="3">
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        Last Activity Date:
                    </td>
                    <td >
                        <input id="txtLastActivityDate" type="text" disabled="disabled" style="width: 200px" />
                    </td>
                </tr>
                 <tr>
                    <td>
                        Member Since:
                    </td>
                    <td >
                        <input id="txtDateCreated" type="text" disabled="disabled" style="width: 200px" />
                    </td>
                </tr>
                <tr>
                    <td>Change Password:</td>
                    <td>
                        <button id="btnPassword" value="ChangePassword">Change Password</button>
                    </td>
                </tr>
            </table>
        </div>
        <div id="Details-2">
            <table class="TableStyle">
              <tr>
                    <td>
                        Firstname:
                    </td>
                    <td>
                        <input id="txtFirstname" type="text" />
                    </td>
                </tr>                
                <tr>
                    <td>
                        Lastname:
                    </td>
                    <td >
                        <input id="txtLastname" type="text" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Nickname:
                    </td>
                    <td >
                        <input id="txtNickname" type="text" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Email:
                    </td>
                    <td >
                        <input id="txtEmail" type="text" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Sex:
                    </td>
                    <td >
                        <select id="drpSex">
                            <option value="M">Male</option>
                            <option value="F">Female</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        Date of Birth:
                    </td>
                    <td >
                        <input id="txtDateOfBirth" type="text" />
                    </td>
                </tr>                
            </table>            
        </div>
        <div id="Details-3">
            <table class="TableStyle">
                <tr>
                    <td>Phone:</td>
                    <td><input id="txtPhone" type="text"/></td>
                </tr>
                 <tr>
                    <td>Mobile:</td>
                    <td><input id="txtMobile" type="text"/></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td>
                        <select id="drpCountry"  >
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td>
                         <select id="drpState"  >
                        </select>
                    </td>
                </tr>
                 <tr>
                    <td>Postcode:</td>
                    <td>
                        <input id="txtPostcode" />
                    </td>
                </tr>
            </table>
        </div>
        <div id="Details-4">
             <table style="width:250px">
                <tr>
                    <td>Accept Community Email:</td>
                    <td><input id="chkCommunityEmail" type="checkbox" /> </td>
                </tr>
                <tr>
                    <td>Accept Advertising Email:</td>
                    <td><input id="chkAdvertisingEmail" type="checkbox" /> </td>
                </tr>
            </table>
        </div>
         <div id="Details-5">
            <table class="TableStyle">
                <tr>
                    <td style="vertical-align:top">Notes:</td>
                    <td>
                        <textarea id="txtNotes" rows="10" cols="1" style="width: 500px"></textarea>
                    </td>
                </tr>
            </table>
        </div>
        <div class="Buttonstyle">
            <input id="Save" type="button" value="Save" />
            <input id="Cancel" type="button" value="Cancel" />
        </div>
    </div>
    
</asp:Content>
